<template>
  <div>
    <van-pull-refresh
      v-if="list.length"
      v-model="refreshing"
      @refresh="onRefresh"
      class="goods-list"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <goods-card
          v-for="item in list"
          :key="item.id"
          :data="item"
          :num="numList[item.id] || 0"
        ></goods-card>
      </van-list>
    </van-pull-refresh>
    <van-empty
      v-else
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      :description="getCardList ? '暂无收藏' : '暂无商品'"
    />
  </div>
</template>

<script>
import GoodsCard from "@/components/GoodsCard.vue";
import { mapState } from "vuex";
import api from "@/api";
export default {
  props: {
    isCollect: {
      type: Boolean,
      default: false,
    },
    api: String,
  },
  components: { GoodsCard },
  mounted() {
    const GoodsList = JSON.parse(localStorage.getItem(this.api));
    if (GoodsList) {
      this.list = GoodsList.list;
      this.total = GoodsList.total;
      this.count = this.page * this.size;
    } else {
      this.getCardList();
    }
  },
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      count: 0,
      size: 20,
      list: [],
      total: 0,
    };
  },
  computed: {
    ...mapState(["type", "numList"]),
  },
  methods: {
    //获取商品列表
    async getCardList() {
      this.$store.commit("setLoading", true);
      const res = await api[this.api](this.page, this.size, this.count, this.type);

      if (res.list.length === 0) {
        localStorage.removeItem(this.api);
        this.list = [];
        return;
      }
      localStorage.setItem(this.api, JSON.stringify(res));
      this.list = res.list;
      this.total = res.total;
      this.count = this.page * this.size;
    },
    //下拉刷新重新加载
    async onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.loading = false;
      this.page = 1;
      this.count = 0;
      await this.getCardList();
      this.refreshing = false;
    },
    //下滑加载更多
    async onLoad() {
      if (this.finished) return;
      this.$store.commit("setLoading", true);
      this.page += 1;
      this.loading = true;
      const { list } = await api[this.api](this.page, this.size, this.count, this.type);
      this.list.push(...list);
      this.count = this.page * this.size;
      if (this.count >= this.total) {
        this.finished = true;
      }
      this.loading = false;
    },
  },
  watch: {
    //排列方式切换
    async type(newVal, odlVal) {
      this.page = 1;
      this.count = 0;
      await this.getCardList();
    },
  },
};
</script>

<style>
/* 因为下拉刷新变为弹性盒，底部文字之前样式无法生效，强行居中 */
.van-list__error-text,
.van-list__finished-text,
.van-list__loading {
  position: relative;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<style lang="scss" scoped>
.goods-list {
  .van-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>
